<template>
    <canvas id="circleS2" :width="width" :height="height"></canvas>
</template>

<script>
export default {
    name: "circleS2",
    props: {
        width: {
            type: [String, Number],
            default: 80
        },
        height: {
            type: [String, Number],
            default: 80
        },
        monthNum: Number,
        allNum: Number
    },
    data() {
        return {
            arcI: {
                r: 20,
                x: new Number(),
                y: new Number()
            },
            arcII: {
                r: 20,
                x: new Number(),
                y: new Number()
            }
        }
    },
    mounted() {
        this.canvasLoad();
    },
    methods: {
        // canvasOption() {
        //     let canvas = document.getElementById("circleS2");
        //     let canvasContent = canvas.getContext("2d");
        //     let width = canvas.clientWidth;
        //     let height = canvas.clientHeight;
        //     canvas.width = width;
        //     canvas.height = height;
        //     canvasContent.strokeStyle = "#2C77E5";
        //     canvasContent.lineWidth = 4;
        //     canvasContent.lineCap = "square";
        //     canvasContent.lineJoin = "round";
        // },
        //先设置好圆心坐标以及半径的长度
        // setOption() {
        //     let canvas = document.getElementById("circleS2");
        //     //let canvasContent = canvas.getContext("2d");
        //     let width = canvas.clientWidth;
        //     let height = canvas.clientHeight;
        //     canvas.width = width;
        //     canvas.height = height;
        //     //第一个圆
        //     this.arcI.x = width / 2;
        //     this.arcI.y = width / 2;
        //     this.arcII.x = width / 2 + 6;
        //     this.arcII.y = width / 2 + 6;
        // },
        canvasLoad() {
            let canvas = document.getElementById("circleS2");
            let canvasContent = canvas.getContext("2d");
            let width = canvas.clientWidth;
            let height = canvas.clientHeight;
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            this.arcI.x = width/2;
            this.arcI.y = height/2;
            this.arcII.x = width/2 + 6;
            this.arcII.y = height/2 - 6;
            canvasContent.beginPath();
            canvasContent.strokeStyle = "#2C77E5";
            canvasContent.lineWidth = 4;
            canvasContent.lineCap = "square";
            canvasContent.lineJoin = "round";
            canvasContent.arc(this.arcI.x, this.arcI.y, this.arcI.r, 0, 1.5*Math.PI, false);
            canvasContent.lineTo(this.arcI.x, this.arcI.y);
            canvasContent.lineTo(this.arcI.x + this.arcI
            .r, this.arcI.y);
            canvasContent.stroke();

            canvasContent.beginPath();
            canvasContent.strokeStyle = "#1AD8E2";
            canvasContent.arc(this.arcII.x, this.arcII.y, this.arcII.r, 0, -0.5*Math.PI, true);
            canvasContent.lineTo(this.arcII.x, this.arcII.y);
            canvasContent.lineTo(this.arcII.x + this.arcII.r, this.arcII.y);
            canvasContent.stroke();
        },
        // setArcI() {

        // },
        // setArcII() {

        // },
        // getProportion() {
        //     //获取比例
        //     let proportion = new String(this.monthNum / (this.monthNum + this.allNum));
        //     let result = new Number(proportion.substring(0, proportion.indexOf(".") + 3));
        //     return {
        //         monthProportion: result,
        //         allProportion: 2 - result
        //     };
        // },
        // getTranslate(proportion) {
        //     console.log(proportion)
        //     //获取需要偏移的距离
        //     let x;
        //     if(proportion === 2 || proportion === 1) {
        //         x = 6 * Math.round(Math.sin(Math.PI * proportion) * 1000000 / 1000000);
        //     }else if(proportion >= 0.5 && proportion <= 1.5) {
        //         x = 6 * Math.sin(Math.PI * proportion);
        //     }
        //     console.log(x);
        // }
    }
}
</script>

<style scoped>

</style>